<!-- 顶部导航栏 -->
<header class="ant-menu ant-menu-horizontal" style="background: #fff; border-bottom: 1px solid #f0f0f0; padding: 0 24px;">
  <nav>
    <ul style="display: flex; gap: 32px; margin: 0; padding: 0; list-style: none;">
      <li class="ant-menu-item">上线日历表</li>
      <li class="ant-menu-item">T+2报表</li>
      <li class="ant-menu-item">上线周报表</li>
      <li class="ant-menu-item">卡中心上线报表</li>
      <li class="ant-menu-item">Label策略管理</li>
      <li class="ant-menu-item ant-menu-item-selected" style="color: #1890ff; border-bottom: 2px solid #1890ff; font-weight: 500;">重要业务系统投产规划(中心)</li>
      <li class="ant-menu-item">重要业务系统投产规划(我的)</li>
      </ul>
    </nav>
</header>

  <!-- 主内容区 -->
<div style="padding: 24px; background: #f5f6fa; position: relative; min-height: 100vh;">
  <div style="background: #fff; padding: 24px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); position: relative;">
    <!-- 左侧翻页按钮 -->
    <button style="position: absolute; left: -24px; top: 50%; transform: translateY(-50%); background: #fff; border: 1px solid #eee; width: 32px; height: 60px; border-radius: 4px 0 0 4px; box-shadow: -2px 0 8px rgba(0,0,0,0.05); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #666;">
      &lt;
    </button>
    
    <table class="ant-table" style="width: 100%; font-size: 13px; border-collapse: collapse;">
      <thead style="background: #fafafa;">
        <tr>
          <th style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">投产规划编号</th>
          <th style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">投产规划名称</th>
          <th style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">申报中心</th>
          <th style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">投产计划实施时间</th>
          <th style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">提交人</th>
          <th style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">规划提审时间</th>
          <th style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">审批通过时间</th>
          <th style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">投产规划状态</th>
          <th style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">GH-JC-2025030101</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025年基础设施研发中心投产规划(2025-05-01-2025-06-30)</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">基础设施研发中心</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025.05.01-2025.06.30</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;"></td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;"></td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;"></td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <span class="status status-grey">待提交</span>
          </td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <a href="#" style="color: #1890ff;">查看</a>
          </td>
        </tr>
        <tr>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">GH-PF-2025030101</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025年批发应用研发中心投产规划(2025-05-01-2025-06-30)</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">批发应用研发中心</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025.05.01-2025.06.30</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">朱文熙/YC02753</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025-03-03 14:46:41</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025-03-03 14:48:31</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <span class="status status-green">审批通过</span>
          </td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <a href="#" style="color: #1890ff;">查看</a>
          </td>
        </tr>
        <tr>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">GH-LS-2025030101</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025年零售应用研发中心投产规划(2025-05-01-2025-06-30)</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">零售应用研发中心</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025.05.01-2025.06.30</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;"></td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;"></td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;"></td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <span class="status status-lightgreen">无需申报</span>
          </td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <a href="#" style="color: #1890ff;">查看</a>
          </td>
        </tr>
        <tr>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">GH-JC-2025010101</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025年基础设施研发中心投产规划(2025-03-01-2025-04-30)</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">基础设施研发中心</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025.03.01-2025.04.30</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">朱文熙/YC02753</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025-03-03 16:19:57</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025-03-03 16:20:39</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <span class="status status-green">审批通过</span>
          </td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <a href="#" style="color: #1890ff;">查看</a>
          </td>
        </tr>
        <tr>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">GH-PF-2025010101</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025年批发应用研发中心投产规划(2025-03-01-2025-04-30)</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">批发应用研发中心</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025.03.01-2025.04.30</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">朱文熙/YC02753</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025-03-03 15:46:31</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025-03-03 15:47:23</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <span class="status status-green">审批通过</span>
          </td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <a href="#" style="color: #1890ff;">查看</a>
          </td>
        </tr>
        <tr>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">GH-LS-2025010101</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025年零售应用研发中心投产规划(2025-03-01-2025-04-30)</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">零售应用研发中心</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025.03.01-2025.04.30</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;"></td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;"></td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;"></td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <span class="status status-lightgreen">无需申报</span>
          </td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <a href="#" style="color: #1890ff;">查看</a>
          </td>
        </tr>
        <tr>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">GH-JC-2024110101</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2024年基础设施研发中心投产规划(2025-01-01-2025-02-28)</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">基础设施研发中心</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025.01.01-2025.02.28</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">朱文熙/YC02753</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025-03-25 16:00:15</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025-04-09 11:05:18</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <span class="status status-red">审批不通过</span>
          </td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <a href="#" style="color: #1890ff;">查看</a>
          </td>
        </tr>
        <tr>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">GH-PF-2024110101</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2024年批发应用研发中心投产规划(2025-01-01-2025-02-28)</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">批发应用研发中心</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025.01.01-2025.02.28</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;"></td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;"></td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;"></td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <span class="status status-grey">待提交</span>
          </td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <a href="#" style="color: #1890ff;">查看</a>
          </td>
        </tr>
        <tr>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">GH-LS-2024110101</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2024年零售应用研发中心投产规划(2025-01-01-2025-02-28)</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">零售应用研发中心</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025.01.01-2025.02.28</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;"></td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;"></td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;"></td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <span class="status status-grey">待提交</span>
          </td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <a href="#" style="color: #1890ff;">查看</a>
          </td>
        </tr>
        <tr>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">GH-JC-2024090101</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2024年基础设施研发中心投产规划(2024-11-01-2024-12-31)</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">基础设施研发中心</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2024.11.01-2024.12.31</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;"></td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;"></td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;"></td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <span class="status status-lightgreen">无需申报</span>
          </td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <a href="#" style="color: #1890ff;">查看</a>
          </td>
        </tr>
        <tr>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">GH-PF-2024090101</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2024年批发应用研发中心投产规划(2024-11-01-2024-12-31)</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">批发应用研发中心</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2024.11.01-2024.12.31</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">朱文熙/YC02753</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2024-12-04 15:09:59</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2025-01-20 10:35:35</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <span class="status status-red">强行终止</span>
          </td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <a href="#" style="color: #1890ff;">查看</a>
          </td>
          </tr>
          <tr>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">GH-LS-2024090101</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2024年零售应用研发中心投产规划(2024-11-01-2024-12-31)</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">零售应用研发中心</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2024.11.01-2024.12.31</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">朱文熙/YC02753</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2024-11-06 11:23:34</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">2024-11-06 11:29:07</td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <span class="status status-green">审批通过</span>
          </td>
          <td style="padding: 12px 8px; border-bottom: 1px solid #f0f0f0;">
            <a href="#" style="color: #1890ff;">查看</a>
          </td>
          </tr>
        </tbody>
      </table>
    
    <!-- 右侧翻页按钮 -->
    <button style="position: absolute; right: -24px; top: 50%; transform: translateY(-50%); background: #fff; border: 1px solid #eee; width: 32px; height: 60px; border-radius: 0 4px 4px 0; box-shadow: 2px 0 8px rgba(0,0,0,0.05); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #666;">
      &gt;
    </button>
    
    <!-- 分页器 -->
    <div style="display: flex; justify-content: flex-end; align-items: center; margin-top: 24px;">
      <span style="margin-right: 16px; color: #666;">共31条</span>
      <button class="ant-pagination-item ant-pagination-item-active" style="border: none; background: #1890ff; color: #fff; margin: 0 2px; padding: 0 12px; height: 32px; line-height: 32px; border-radius: 4px; cursor: pointer;">1</button>
      <button class="ant-pagination-item" style="border: none; background: transparent; color: #666; margin: 0 2px; padding: 0 12px; height: 32px; line-height: 32px; border-radius: 4px; cursor: pointer;">2</button>
      <button class="ant-pagination-item" style="border: none; background: transparent; color: #666; margin: 0 2px; padding: 0 12px; height: 32px; line-height: 32px; border-radius: 4px; cursor: pointer;">3</button>
      <button class="ant-pagination-next" style="border: none; background: transparent; color: #666; margin-left: 8px; padding: 0 12px; height: 32px; line-height: 32px; border-radius: 4px; cursor: pointer;">&gt;</button>
    </div>
  </div>
    </div>

<!-- 客服浮窗按钮 -->
<div style="position: fixed; bottom: 32px; right: 32px; z-index: 1000;">
  <button style="width: 48px; height: 48px; border-radius: 50%; background: #1890ff; color: #fff; border: none; box-shadow: 0 2px 8px rgba(24,144,255,0.4); display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer;">
    💬
  </button>
</div>

<style>
.ant-menu-item { cursor: pointer; padding: 0 16px; height: 48px; display: flex; align-items: center; font-size: 15px; color: #333; }
.status { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.status-grey { color: #999; background: #f5f5f5; }
.status-green { color: #52c41a; background: #f6ffed; }
.status-lightgreen { color: #389e0d; background: #e6fffb; }
.status-red { color: #f5222d; background: #fff1f0; }
</style>
